<template>
	<gracePage :customHeader="false">
		<view slot="gBody">
			<form @submit="formSubmit" class="grace-form grace-margin-top">
				<view class="grace-body grace-form-item">
					<text class="grace-form-label">更换头像</text>
					<view class="grace-form-body">
						<view class="grace-list">
							<view class="grace-list-items">
								<view class="grace-list-body">
									<view class="grace-list-title">
										<text class="grace-list-title-text"></text>
									</view>
								</view>
								<view class="grace-list-image ucenter-face grace-relative" @tap="chooseAvatar">
									<image class="grace-list-image ucenter-face-image" :src="userInfo.avatar"
									 mode="widthFix"></image>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="grace-common-line"></view>
				<view class="grace-body grace-form-item">
					<text class="grace-form-label">用户名</text>
					<view class="grace-form-body">
						<input type="text" class="grace-form-input" name="nickname" v-model="userInfo.nickname" placeholder="请输入您的昵称"></input>
					</view>
					<text class="grace-icons icon-close grace-form-icon grace-text-center" v-if="userInfo.nickname != ''" @tap="clearInput"></text>
				</view>
				<view class="grace-common-line"></view>
				<view class="grace-body grace-form-item">
					<text class="grace-form-label">性别</text>
					<view class="grace-form-body">
						<picker class="grace-form-picker" @change="bindPickerChange" :value="genderIndex" :range="gender" name="gender">
							<text class="grace-text">{{gender[genderIndex]}}</text>
							<text class="grace-icons icon-arrow-down" style="margin-left:5px;"></text>
						</picker>
					</view>
				</view>
				<view class="grace-common-line"></view>
				<view class="grace-body grace-form-item" @tap="showDate1">
					<text class="grace-form-label">生日</text>
					<view class="grace-form-body">
						<input type="text" name="birthday" v-model="userInfo.birthday" class="grace-form-input" disabled placeholder="请选择出生日期" />
					</view>
					<text class="grace-icons icon-arrow-down grace-form-icon grace-text-center"></text>
				</view>
				<view class="grace-common-line"></view>
				<view class="grace-body grace-form-item">
					<text class="grace-form-label">手机号</text>
					<view class="grace-form-body">
						<input type="text" class="grace-form-input" name="mobile" v-model="userInfo.mobile" placeholder="请输入您的手机号码"></input>
					</view>
					<text class="grace-icons icon-close grace-form-icon grace-text-center" v-if="userInfo.mobile != ''" @tap="clearInput"></text>
				</view>
				<view class="grace-common-line"></view>
				<view class="grace-body grace-form-item" @tap="open2">
					<text class="grace-form-label">地区</text>
					<view class="grace-form-body">
						<input type="text" class="grace-form-input" name="value2" :value="value2" disabled placeholder="请选择所在地" />
					</view>
					<text class="grace-icons icon-arrow-down grace-form-icon grace-text-center"></text>
				</view>
			</form>
			<graceDate :show="show1" :isTime="false" :currentDate="userInfo.birthday" @changeDate="changeDate1" @closeDate="closeDate1"></graceDate>
			<graceAddressPicker :show="show2" @confirm="confirm2" @close="close2" :value="default2"></graceAddressPicker>
		</view>
	</gracePage>
</template>
<script>
	import gracePage from "../../graceUI/components/gracePage.vue";
	import graceAddressPicker from '../../graceUI/components/graceAddressPicker.vue';
	import graceDate from "../../graceUI/components/graceDate.vue";
	import graceSelectImgAndUpload from "../../graceUI/components/graceSelectImgAndUpload.vue";
	export default {
		data() {
			return {
				userInfo:{avatar: '',
				nickname: '',
				gender: 0,
				birthday: '',
				mobile: '',
				province: '',
				city: '',
				area: ''},
				gender: ['请选择性别', '男', '女'],
				genderIndex: 0,
				show1: false,
				show2: false,
				value2: '',
				// 第2个级联的默认值
				// ["26", "0", "5"] 代表 "陕西省", "西安市", "雁塔区"
				default2: [26, 0, 5],
				selectedimgs : [],
				// 上传按钮名称
				subtxt : "发布"
			}
		},
		onLoad:function(){
			this.getUserInfo();
		},
		methods: {
			clearInput: function() {

			},
			bindPickerChange: function(e) {
				console.log(e);
				this.genderIndex = e.detail.value;
			},
			formSubmit: function(e) {
				uni.showToast({
					title: '请观察控制台',
					icon: 'none'
				});
				console.log(JSON.stringify(e.detail.value));
			},
			//保存用户信息
			async getUserInfo() {
				let data = await this.$apis.getUserinfo();
				
			},
			//保存用户信息
			async submitUserInfo(data) {
				let ret = await this.$apis.registerUser(data);
				uni.showToast({
					title: "注册成功!",
					icon: "none"
				});
			},
			showDate1: function() {
				this.show1 = true;
			},
			closeDate1: function() {
				this.show1 = false;
			},
			changeDate1: function(e) {
				this.birthday = e;
				this.show1 = false;
			},
			open2: function() {
				this.show2 = true;
			},
			confirm2: function(e) {
				// 返回选中城市的编号及文本信息
				console.log(e);
				this.province = e.codes[0];
				this.city = e.codes[1];
				this.area = e.codes[2];
				this.value2 = e.names[0] + ',' + e.names[1] + ',' + e.names[2];
				this.close2();
			},
			close2: function() {
				this.show2 = false;
			},
			//更换头像
			chooseAvatar: function() {
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					sourceType: ['album'],
					success: (res) => {
						console.log('chooseImage success, temp path is', res.tempFilePaths[0])
						var imageSrc = res.tempFilePaths[0]
						uni.uploadFile({
							url: 'https://unidemo.dcloud.net.cn/upload',
							filePath: imageSrc,
							fileType: 'image',
							name: 'data',
							success: (res) => {
								console.log('uploadImage success, res is:', res)
								uni.showToast({
									title: '上传成功',
									icon: 'success',
									duration: 1000
								})
								this.imageSrc = imageSrc
							},
							fail: (err) => {
								console.log('uploadImage fail', err);
								uni.showModal({
									content: err.errMsg,
									showCancel: false
								});
							}
						});
					},
					fail: (err) => {
						console.log('chooseImage fail', err)
					}
				})
			}
		},
		components: {
			gracePage,
			graceAddressPicker,
			graceDate,
			graceSelectImgAndUpload
		}
	}
</script>
<style>
	.grace-border-b {
		border-color: #F8F8F8;
	}
	.ucenter-face{width:130rpx !important; height:130rpx !important;padding: 30rpx 30rpx;}
	.ucenter-face-image{width:130rpx !important; height:130rpx !important;}
</style>
